import React, { Component } from "react";
// class LiveCylce extends Component {
//   // 挂载时生命周期函数的执行顺序
//   // 作用：初始化成员变量的，比如state，或者是使用bind改变函数的this指针
//   constructor() {
//     super();
//     console.log("1.0 constructor");
//   }

//   // 作用：返回当前的组件结构
//   render() {
//     console.log("2.0 render");
//     return <div></div>;
//   }

//   // 作用：表示页面已经加载好了，在这个里边通常是发送ajax请求，获取到数据以后来更新state中的状态值
//   componentDidMount() {
//     console.log("3.0 componentDidMount");
//   }
// }

// export default LiveCylce;

class LiveCylceParent extends Component {
  state = { name: "张" };
  render() {
    return (
      <div>
        <LiveCylce name={this.state.name}></LiveCylce>
      </div>
    );
  }
}

export default LiveCylceParent;

// 更新数据的时候的执行生命周期方法
class LiveCylce extends Component {
  state = { count: 0 };
  // 作用：返回当前的组件结构
  render() {
    console.log("2.0 render");
    return (
      <div>
        {this.state.count}
        <button
          onClick={() => {
            // 1.0 改变state属性中的状态属性值会触发页面的什么周期方法完成更新
            // this.setState({ count: 1 });
            this.forceUpdate(); // 强制更新
          }}
        >
          +1
        </button>
      </div>
    );
  }

  // 表示数据已经更新完成了（props中的某个属性值，state中的某个属性值）
  componentDidUpdate() {
    console.log("3.0 componentDidUpdate");
  }
}

// export default LiveCylce;
